<template>
  <div class="validate">
    <div class="el-page-header">
      <div class="el-page-header__left" @click="goBack()">
        <i class="el-icon-back"></i>
        <div class="el-page-header__title">返回</div>
      </div>
      <div class="el-page-header__content">{{title || $route.meta.title}}</div>
    </div>
    <div class="section">
      <el-row class="group">
        <el-col :sm="8" :xs="24">
          <div class="group-item">
            <div class="name">批次号</div>
            <div class="value">{{headData.patch_no}}</div>
          </div>
        </el-col>
        <el-col :sm="8" :xs="24">
          <div class="group-item">
            <div class="name">企业名称</div>
            <div class="value">{{headData.company_name}}</div>
          </div>
        </el-col>
        <el-col :sm="8" :xs="24">
          <div class="group-item">
            <div class="name">导入条数</div>
            <div class="value">{{headData.import_sum}}（条）</div>
          </div>
        </el-col>
      </el-row>
      <el-row class="group">
        <el-col :sm="8" :xs="24">
          <div class="group-item">
            <div class="name">企业余额</div>
            <div class="value">{{headData.recharge_amount}}</div>
          </div>
        </el-col>
        <el-col :sm="8" :xs="24">
          <div class="group-item">
            <div class="name">企业应付金额</div>
            <div class="value">{{headData.payable_amount}}</div>
          </div>
        </el-col>
        <el-col :sm="8" :xs="24">
          <div class="group-item">
            <div class="name">文档汇总金额</div>
            <div class="value">{{headData.summary_amount}}</div>
          </div>
        </el-col>
      </el-row>
      <el-row class="group">
        <el-col :sm="8" :xs="24">
          <div class="group-item">
            <div class="name">导入周期</div>
            <div class="value">{{headData.date}}</div>
          </div>
        </el-col>
        <el-col :sm="16" :xs="24">
          <div class="group-item" :class="headData.error.length > 0 ? 'error' : ''">
            <div class="name">错误信息</div>
            <div class="value">{{headData.error[0]}}
              <el-popover
                placement="bottom"
                title="错误信息"
                trigger="hover">
                <div>
                  <p v-for="(error, index) in headData.error" :key="index">{{index + 1}}. {{error}}</p>
                </div>
                <span slot="reference" v-show="headData.error.length > 1"><i class="more el-icon-d-arrow-right"></i></span>
              </el-popover>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="section" style="margin-top: 20px;">
      <el-table :data="listData"
        ref="table"
        v-show="steps === 2"
        :row-class-name="handleRowClassName"
        @selection-change="handleSelectionChange"
        style="width: 100%">
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <!-- <el-table-column align="center" prop="order_no" label="结算单号"></el-table-column> -->
        <el-table-column align="center" prop="personal_user_name" label="注册账号"></el-table-column>
        <el-table-column align="center" prop="pay_info.bank_number" label="收款方客户账号">
          <template slot-scope="scope">
            <span v-if="scope.row.pay_info && scope.row.pay_type === '银行转账'">{{scope.row.pay_info.bank_number}}</span>
            <span v-else-if="scope.row.pay_info">{{scope.row.pay_info.alipay_account}}</span>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="pay_type" label="付款方式"></el-table-column>
        <el-table-column align="center" prop="money_income" label="支付金额"></el-table-column>
        <el-table-column align="center" prop="money_pay" label="实付（结算）金额"></el-table-column>
        <el-table-column align="center" prop="remark" label="备注"></el-table-column>
        <!-- <el-table-column v-if="steps === 2" align="center" prop="address" label="重复记录">
          <template slot-scope="scope">
            <el-popover
              placement="left"
              width="1000"
              v-if="scope.row.repeat"
              trigger="hover">
              <el-table :data="scope.row.repeat">
                <el-table-column property="date" label="批次号"></el-table-column>
                <el-table-column property="name" label="结算单号"></el-table-column>
                <el-table-column property="address" label="收款方账号"></el-table-column>
                <el-table-column property="address" label="收款方账户名称"></el-table-column>
                <el-table-column property="address" label="支付金额"></el-table-column>
                <el-table-column property="address" label="实付金额"></el-table-column>
                <el-table-column property="address" label="结款周期"></el-table-column>
                <el-table-column property="address" label="导入时间"></el-table-column>
              </el-table>
              <el-button slot="reference" type="text" @click="console.log(scope.row)">查看</el-button>
            </el-popover>
            <div v-else>无</div>
          </template>
        </el-table-column> -->
        <el-table-column v-if="steps === 2" align="center" prop="address" label="错误信息">
          <template slot-scope="scope">
            <div class="error" v-for="(item, index) in scope.row.error_list" :key="index">{{(index + 1) + '. ' + item}}</div>
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="listData"
        v-show="steps === 3"
        style="width: 100%">
        <el-table-column align="center" prop="personal_user_name" label="注册账号"></el-table-column>
        <el-table-column align="center" prop="pay_info.bank_number" label="收款方客户账号">
          <template slot-scope="scope">
            <span v-if="scope.row.pay_info && scope.row.pay_type === '银行转账'">{{scope.row.pay_info.bank_number}}</span>
            <span v-else-if="scope.row.pay_info">{{scope.row.pay_info.alipay_account}}</span>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="pay_type" label="付款方式"></el-table-column>
        <el-table-column align="center" prop="money_income" label="支付金额"></el-table-column>
        <el-table-column align="center" prop="money_pay" label="实付（结算）金额"></el-table-column>
        <el-table-column align="center" prop="remark" label="备注"></el-table-column>
      </el-table>
      <div class="buttons" v-if="steps === 2">
        <!-- <el-button @click="goNext()" type="primary">下一步</el-button> -->
        <el-button @click="goBack()">重新导入</el-button>
      </div>
      <div class="buttons" v-else>
        <el-button @click="doSubmit()" type="primary">确认提交</el-button>
        <el-button @click="goBack()">上一步</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'validate',
  props: {
    headData: {
      type: Object,
      default: {}
    },
    tableData: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      title: '核对付款明细',
      steps: 2,
      headInfo: [
        {
          name: '批次号',
          value: ''
        }, {
          name: '企业名称',
          value: ''
        }, {
          name: '导入条数',
          value: ''
        }, {
          name: '错误消息',
          value: ''
        }
      ],
      listData: [],
      confirmList: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.confirmList = val
    },
    handleRowClassName({row, rowIndex}) {
      if (row.repeat) {
        return 'is-repeat'
      }
      if (row.error_list && row.error_list.length > 0) {
        return 'is-error'
      }
    },
    selectDefault() {
      this.$nextTick(() => {
        this.listData.forEach(row => {
          if (!(row.repeat || (row.error_list && row.error_list.length > 0))) {
            this.$refs['table'].toggleRowSelection(row, true)
          }
        })
      })
    },
    goBack() {
      if (this.steps === 2) {
        this.$emit('cancel', true)
      } else {
        this.steps = 2
        this.title = '核对付款明细'
      }
    },
    goNext() {
      this.steps = 3
      this.title = '确认付款明细'
    },
    doSubmit() {
      this.$http.post('/company/money_import/create', {
        // header: this.headData,
        // list: this.listData
        pay_file: this.headData.pay_file,
        date: this.headData.date,
        money_input: this.headData.money_input
      }).then(res => {
        if (res.code === 200) {
          this.$router.push('/company/deal/settlement')
        }
      })
    }
  },
  mounted() {
    this.listData = this.tableData
    if (!this.headData.error_status) {
      this.goNext()
    }
    // this.selectDefault()
    this.headInfo[0].value = this.headData.patch_no
    this.headInfo[1].value = this.headData.company_name
    this.headInfo[2].value = `${this.headData.import_sum}（条）`
    this.headInfo[3].value = this.headData.error
  }
}
</script>
<style lang="less" scoped>
.group {
  margin: 15px 0;
  border: 1px solid #eee;
  .group-item {
    display: flex;
    height: 36px;
    line-height: 36px;
    text-align: center;
    &.error {
      .value {
        background: #FFEB3B;
        color: #F56C6C;
        text-align: left;
        overflow: hidden;
        padding: 0 20px;
        position: relative;
        .more {
          line-height: 36px;
          color: #F56C6C;
        }
      }
    }
    .name {
      width: 120px;
      background: #e5e9f2;
    }
    .value {
      flex: 1;
    }
  }
}
.buttons {
  margin-top: 15px;
  text-align: center;
  .el-button {
    width: 100px;
  }
}
/deep/.is-repeat {
  .cell {
    color: #f56c6c;
  }
}
/deep/.is-error {
  .error {
    color: #f56c6c;
  }
}
</style>